<template>
  <el-pagination
    v-model:current-page="props.currentPage"
    v-model:page-size="props.pageSize"
    :page-sizes="[3, 6, 9, 11]"
    :disabled="props.disabled"
    :background="true"
    layout="prev, pager, next,jumper,->,sizes,total"
    @current-change="emitPageChange"
    @size-change="emitPageSizeChange"
    :total="total"
  />
</template>

<script setup lang="ts">
import { defineOptions } from "vue";
defineOptions({
  name: "Pagination",
});
// 接收父组件传递的数据
const props = defineProps({
  currentPage: { type: Number },
  pageSize: { type: Number },
  disabled: { type: Boolean },
  total: { type: Number },
});

// 定义事件发射器
const emit = defineEmits(["update:currentPage", "update:pageSize"]);

const emitPageChange = () => {
  emit("update:currentPage", 3);
};
const emitPageSizeChange = () => {
  emit("update:pageSize", 3);
};
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
